<template>
  <div>
    <virtual-scroll
      v-show="show"
      ref="virtualScroll"
      :data="list"
      :item-size="62"
      key-prop="id"
      @change="(virtualList) => tableData = virtualList"
      @selection-change="handleSelectionChange">
      <el-table
        :data="tableData"
        height="500"
        row-key="id"
        tooltip-effect="dark"
        style="width: 100%">
        <!-- 多选 -->
        <!--type=radio || index-->
        <virtual-column width="60" type="selection" :selectable="getSelectable"></virtual-column>
        <!-- <virtual-column width="60" type="selection"></virtual-column> -->
        <el-table-column
          label="日期"
          width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="{row}">
            <el-button @click="onDel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </virtual-scroll>
    <div style="margin-top: 20px">
<!--      <el-button @click="toggleSelection([list[1], list[2]])">切换第二、第三行的选中状态</el-button>-->
<!--      <el-button @click="toggleSelection()">取消选择</el-button>-->
<!--      <el-button @click="show = !show">show</el-button>-->
    </div>
  </div>
</template>

<script>
  import VirtualScroll from 'el-table-virtual-scroll'
  import { VirtualColumn } from 'el-table-virtual-scroll'
  // import { mockData } from '@/utils'

  export default {
    components: {
      VirtualScroll,
      VirtualColumn
    },
    created(){
      for (let i = 0; i < 9999; i++) {
        this.list.push({
          name:i,
          address:"地址"+i,
          date:i,
          id:i
        })
      }
    },
    data () {
      return {
        list: [],
        tableData: [],
        multipleSelection: [],
        show: true
      }
    },
    methods: {
      getSelectable (row, idx) {
        return true
        // return idx > 5
      },
      toggleSelection (rows) {
        // if (rows) {
        //   rows.forEach(row => {
        //     this.$refs.virtualScroll.toggleRowSelection(row)
        //   });
        // } else {
        //   this.$refs.virtualScroll.clearSelection()
        // }
      },
      handleSelectionChange (val) {
        console.log('multipleSelection', val)
        this.multipleSelection = val
      },
      onDel(row){
        console.log(row);
      }
    },

  }
</script>

<style lang='scss' scoped>

</style>
